<template>
	<van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft" />
	<van-image width="100%" height="200" :src="goodsDetail.url" />
	<h2>商品名称:{{ goodsDetail.name }}</h2>
	<p>商品价格:{{ goodsDetail.price }}</p>

	<van-action-bar>
		<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
		<van-action-bar-icon icon="cart-o" text="购物车" />
		<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
		<van-action-bar-button type="warning" text="加入购物车" />
		<van-action-bar-button type="danger" text="立即购买" />
	</van-action-bar>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter() // 路由对象
const route = useRoute() // 路由信息对象

const goodsDetail = ref({})

const onClickLeft = () => {
	router.back() //返回上级
}

/**
 * 获取商品详情
 */
const getGoodsDetail = id => {
	axios({
		url: 'http://localhost:3000/goods/' + id,
		method: 'GET',
	}).then(res => {
		const data = res.data
		if (data.code == 1) {
			goodsDetail.value = data.good
			console.log('商品数据 ： ', goodsDetail.value)
		}
	})
}

onMounted(() => {
	const id = route.query.id
	getGoodsDetail(id)
})
</script>

<style lang="scss" scoped></style>
